<template>
    <el-dialog :model-value="addVisible" :title="props.info ? '编辑字典' : '新增字典'" width="500px"
        :before-close="handleClose">
        <el-form :model="form" label-width="100px" class="form" ref="ruleFormRef">

            <el-form-item label="字典类型" prop="type">
                <el-input v-model="form.type" disabled/>
            </el-form-item>
            <el-form-item label="字典ID" prop="id">
                <el-input v-model="form.id" disabled/>
            </el-form-item>
            <el-form-item label="字典名称" prop="name">
                <el-input v-model="form.name" disabled/>
            </el-form-item>

            <el-form-item label="平台字典类型" prop="sdbUrl">
                <!-- <el-input v-model="form.sdbUrl" /> -->
                <el-select v-model="form.ptype" placeholder="Select" size="large" style="width: 240px">
                    <el-option v-for="item in dblist" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>

            <el-form-item label="平台字典ID" prop="dictName">
                <el-input v-model="form.pid" />
            </el-form-item>

            <el-form-item label="平台字典名称" prop="dictsql">
                <el-input v-model="form.pname" />
            </el-form-item>


            <el-form-item class="btn">
                <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
                <el-button @click="close(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, defineEmits, watch, onBeforeMount } from 'vue'
import { addDict, saveLDict, GetDblist } from '../../../../http'
import { DictModel } from '../class/DictModel'
import { ElMessage } from "element-plus"
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

// 接收父组件参数
const props = defineProps({
    addVisible: Boolean,
    info: String
})

// 表单数据
const form = ref({
    type: "",
    id: "",
    name: "",
    ptype: "",
    pid: "",
    pname: "",
})

//#region 组件挂之前，初始化数据
interface ListItem1 {
    name: string;
    type: string;
    dbname: string;
    url: string;
    username: string;
    password: string;
}
//数据库连接列表
const dblist = ref<ListItem1[]>([]);
onBeforeMount(async () => {
    let ref1 = await GetDblist();
    // console.log(ref1.data);
    dblist.value = ref1.data;
    // console.log(dblist.value);
});
//#endregion




// 监听info变化，初始化表单数据
watch(
    () => props.info,
    (newInfo) => {
        if (newInfo) {
            const currInfo: DictModel = JSON.parse(newInfo)
            form.value = {
                type: currInfo.type,
                id: currInfo.id,
                name: currInfo.name,
                ptype: "",
                pid: "",
                pname: "",
            }
        } else {
            form.value = {
                type: "",
                id: "",
                name: "",
                ptype: "",
                pid: "",
                pname: "",
            }
        }
    }
)

// 定义回调事件
const emits = defineEmits(["CloseAdd"])

// 关闭弹窗
const handleClose = () => {
    emits("CloseAdd")
}

// 提交表单
const submit = async (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    await ruleFormRef.validate(async (valid) => {
        if (valid) {
            const params = { ...form.value }

            if (props.info) {
                // 编辑操作
                // const res = await saveLDict(form.value.sdbUrl, form.value.dictName, form.value.dictsql) as any
                // if (res.status) {
                //     ElMessage({
                //         message: '编辑成功！',
                //         type: 'success',
                //     })
                // }
            } else {
                // 新增操作
                // const res = await saveLDict(form.value.sdbUrl, form.value.dictName, form.value.dictsql) as any
                // if (res.status) {
                //     ElMessage({
                //         message: '新增成功！',
                //         type: 'success',
                //     })
                // }
            }
            emits("CloseAdd")
        }
    })
}

// 取消操作
const close = (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    ruleFormRef.resetFields()
    emits("CloseAdd")
}
</script>

<style lang="scss" scoped>
.form {
    .btn {
        margin-top: 20px;
        text-align: right;
    }
}
</style>